<template>
  <Dialog :title="dialogTitle" v-model="dialogVisibleForm" width="800" class="call-form-dialog">
    <div class="dialog-content">
      <!-- 头部区域 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:document-add" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">{{ dialogTitle }}</h3>
          <p class="dialog-subtitle">配置呼叫名单信息</p>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="form-container">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          v-loading="formLoading"
          class="enhanced-form"
        >
          <el-form-item label="名单名称" prop="name" v-if="formType != 'add'" class="form-item">
            <div class="input-wrapper">
              <Icon icon="ep:document" class="input-icon" />
              <el-input
                v-model.trim="formData.name"
                placeholder="请输入名单名称"
                class="enhanced-input"
              />
            </div>
          </el-form-item>

          <el-form-item
            label="呼叫名单"
            :required="true"
            v-if="formType != 'update'"
            class="form-item"
          >
            <div class="upload-section">
              <div class="upload-area">
                <el-upload
                  ref="uploadRef"
                  class="upload-component"
                  v-model:file-list="fileList"
                  :auto-upload="false"
                  :limit="1"
                  accept=".txt,.xlsx"
                  action="none"
                  drag
                >
                  <div class="upload-content">
                    <Icon icon="ep:upload-filled" class="upload-icon" />
                    <div class="upload-text">
                      <p class="upload-title">点击或拖拽文件到此处上传</p>
                      <p class="upload-desc">支持 .txt 和 .xlsx 格式</p>
                    </div>
                  </div>
                </el-upload>
              </div>

              <div class="template-section">
                <div class="template-header">
                  <Icon icon="ep:document" class="template-icon" />
                  <span class="template-title">下载模板</span>
                </div>
                <div class="template-buttons">
                  <el-button size="small" @click="downTem" class="template-btn">
                    <Icon icon="ep:download" class="btn-icon" />
                    Excel模板
                  </el-button>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item
            label="号码校验标准"
            prop="verify"
            v-if="formType == 'create'"
            class="form-item"
          >
            <div class="radio-group">
              <el-radio v-model="formData.verify" label="1" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:check" class="radio-icon" />
                  <span>开启</span>
                </div>
              </el-radio>
              <el-radio v-model="formData.verify" label="0" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:close" class="radio-icon" />
                  <span>关闭</span>
                </div>
              </el-radio>
            </div>
          </el-form-item>

          <el-form-item label="是否去重" v-if="formType != 'update'" class="form-item">
            <div class="radio-group">
              <el-radio v-model="formData.unique" label="1" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:check" class="radio-icon" />
                  <span>全局校验</span>
                </div>
              </el-radio>
              <el-radio v-model="formData.unique" label="0" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:close" class="radio-icon" />
                  <span>不校验</span>
                </div>
              </el-radio>
              <el-radio v-model="formData.unique" label="2" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:list" class="radio-icon" />
                  <span>呼叫名单校验</span>
                </div>
              </el-radio>
            </div>
          </el-form-item>
        </el-form>

        <!-- 提示信息 -->
        <div class="tips-section">
          <div class="tips-header">
            <Icon icon="ep:info-filled" class="tips-icon" />
            <span class="tips-title">温馨提示</span>
          </div>
          <div class="tips-content">
            <div class="tip-item">
              <Icon icon="ep:check" class="tip-icon" />
              <span class="tip-text">Excel表格文件的第一行不会被导入</span>
            </div>
            <div class="tip-item">
              <Icon icon="ep:check" class="tip-icon" />
              <span class="tip-text">单次导入名单数量建议不超过10W条，过多容易导入失败</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleForm = false" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button @click="submitForm" type="primary" :disabled="formLoading" class="confirm-btn">
          <Icon icon="ep:check" class="btn-icon" />
          确定
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import { RecordApi } from '@/api/call/record'
import download from '@/utils/download'
import { Close } from '@element-plus/icons-vue'
import axios from 'axios'
import calleeListTemplete from './calleeListTemplete.txt'

const dialogTitle = ref('操作')
const dialogVisibleForm = ref(false)
const { t } = useI18n()

const emit = defineEmits(['success'])

const formLoading = ref(false)
const formRules = reactive({
  name: [
    {
      required: true,
      message: '名单名称不能为空',
      trigger: 'blur'
    }
  ],
  verify: [
    {
      required: true,
      message: '号码校验标准不能为空',
      trigger: 'change'
    }
  ],
  unique: [
    {
      required: true,
      message: '请选择是否去重',
      trigger: 'change'
    }
  ]
})
const formData = reactive({
  name: null,
  verify: '0',
  unique: '0'
})
const fileList = ref([])
const callId = ref(null)
const formType = ref(null)
const open = async (type, id) => {
  dialogVisibleForm.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  fileList.value = []
  formData.name = null
  formData.verify = '0'
  formData.unique = '0'
  if (type == 'update' || type == 'add') {
    callId.value = id
    const data = await RecordApi.getTaskCalleeId(id)
    formData.name = data.name
  }
}
defineExpose({ open })
const formRef = ref(null)
/*提交*/
const submitForm = async () => {
  const valid = await formRef.value.validate()
  if (!valid) return

  const formDataUp = new FormData()
  // 创建
  if (formType.value == 'create') {
    if (fileList.value.length == 0) {
      ElMessage.error('请上传文件')
      return
    }
    formDataUp.append('name', formData.name)
    formDataUp.append('verify', formData.verify)
    formDataUp.append('unique', formData.unique)
    formDataUp.append('file', fileList.value[0].raw)
    // 追加
  } else if (formType.value == 'add') {
    if (fileList.value.length == 0) {
      ElMessage.error('请上传文件')
      return
    }
    formDataUp.append('name', formData.name)
    formDataUp.append('id', callId.value)
    formDataUp.append('verify', formData.verify)
    formDataUp.append('unique', formData.unique)
    formDataUp.append('file', fileList.value[0].raw)
  } else {
    // 编辑
    formDataUp.append('name', formData.name)
    formDataUp.append('id', callId.value)
    formDataUp.append('unique', '1')
    formDataUp.append('verify', '1')
  }
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      await RecordApi.createTaskCallee(formDataUp)
      ElMessage.success(t('common.createSuccess'))
    } else if (formType.value === 'add') {
      await RecordApi.appendTaskCallee(formDataUp)
      ElMessage.success('追加成功!')
    } else {
      await RecordApi.updateTaskCallee(formDataUp)
      ElMessage.success(t('common.updateSuccess'))
    }
    dialogVisibleForm.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
/*下载模板 xlsx*/
const downTem = async () => {
  const data = await RecordApi.getTemplate()
  download.excel(data, '呼叫名单模板.xlsx')
}
/*下载模板 txt*/
const downTxt = async () => {
  const response = await axios({
    url: calleeListTemplete,
    responseType: 'blob'
  })
  download.txt(response.data, '呼叫名单模板.txt')
}
</script>

<style lang="scss" scoped>
.call-form-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-dialog__footer) {
    padding: 0;
    border-top: 1px solid #e5e7eb;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;

  @media (max-width: 768px) {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 表单容器 */
.form-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 20px;
  }
}

.enhanced-form {
  .form-item {
    margin-bottom: 24px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
      font-size: 14px;
    }
  }
}

/* 输入框样式 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-input {
  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

/* 上传区域 */
.upload-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  transition: all 0.2s ease;

  &:hover {
    border-color: #0052cc;
  }
}

.upload-component {
  :deep(.el-upload) {
    width: 100%;
  }

  :deep(.el-upload-dragger) {
    width: 100%;
    height: 120px;
    border: none;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.05);
    }
  }
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}

.upload-icon {
  font-size: 32px;
  color: #6b7280;
}

.upload-text {
  text-align: center;
}

.upload-title {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 4px 0;
}

.upload-desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 模板区域 */
.template-section {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.template-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.template-icon {
  color: #0052cc;
  font-size: 16px;
}

.template-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.template-buttons {
  display: flex;
  gap: 8px;
}

.template-btn {
  border: 1px solid #0052cc;
  color: #0052cc;
  background: white;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
  }

  .btn-icon {
    margin-right: 4px;
  }
}

/* 单选框组 */
.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
  }
}

.radio-item {
  :deep(.el-radio__label) {
    padding-left: 8px;
  }
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-icon {
  font-size: 14px;
  color: #6b7280;
}

/* 提示区域 */
.tips-section {
  background: linear-gradient(135deg, #e6f3ff 0%, #f0f8ff 100%);
  border: 1px solid #b3d9ff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.tips-icon {
  color: #0052cc;
  font-size: 16px;
}

.tips-title {
  font-size: 14px;
  font-weight: 600;
  color: #0052cc;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tip-icon {
  color: #10b981;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.tip-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: white;

  @media (max-width: 768px) {
    padding: 16px 20px;
    flex-direction: column;
  }
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 上传列表样式 */
:deep(.el-upload-list) {
  margin-top: 12px;

  .el-upload-list__item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
    margin-top: 8px;
    transition: all 0.2s ease;

    &:hover {
      background: #f1f5f9;
    }
  }

  .el-upload-list__item-file-name {
    color: #374151;
    font-weight: 500;
    width: auto !important;
  }

  .el-upload-list__item-status-label {
    color: #10b981;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .form-container,
  .dialog-footer {
    background: #374151;
  }

  .dialog-title {
    color: #f9fafb;
  }

  .upload-area {
    border-color: #4b5563;

    &:hover {
      border-color: #60a5fa;
    }
  }

  .upload-component {
    :deep(.el-upload-dragger) {
      background: #4b5563;

      &:hover {
        background: rgba(96, 165, 250, 0.1);
      }
    }
  }

  .upload-title {
    color: #f9fafb;
  }

  .upload-desc,
  .upload-icon {
    color: #d1d5db;
  }

  .template-section {
    background: #4b5563;
    border-color: #6b7280;
  }

  .template-title {
    color: #f9fafb;
  }

  .tips-section {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
  }

  .tips-title {
    color: #60a5fa;
  }

  .tip-text {
    color: #d1d5db;
  }

  .enhanced-input {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .input-icon {
    color: #d1d5db;
  }

  .radio-icon {
    color: #d1d5db;
  }
}
</style>
